<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.3/axios.min.js"></script>
        <style>
            .wrapper {
                width: 100vw;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ddd;
            }
            .box {
                width: 400px;
                padding: 30px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
                <div class="form-group">
                    <input
                        type="text"
                        class="form-control username"
                        placeholder="用户名"
                    />
                </div>
                <div class="form-group">
                    <input
                        type="password"
                        class="form-control password"
                        placeholder="密码"
                    />
                </div>
                <button class="btn btn-primary">登录</button>
                <button class="btn btn-danger">获取</button>
            </div>
        </div>
    </body>
</html>
<script>
    const button = document.querySelector(".btn-primary");
    const getbutton = document.querySelector(".btn-danger");
    button.addEventListener("click", async () => {
        const res = await axios.post("http://localhost:3000/api/login", {
            username: document.querySelector(".username").value,
            password: document.querySelector(".password").value,
        });
    });
    getbutton.addEventListener("click", async () => {
        const res = await axios.get("http://localhost:3000/api/", {
            withCredentials: true,
        });
        console.log(res);
    });
</script>
